<template>
	<view>
		<!-- Header Section -->
		<view class="bg-header">
			<view class="container">
				<view class="header">
					<view class="user-info">
						<!-- <image class="avatar" src="/static/user/avatar.png"></image> -->

						<view class="avatar-info" @tap="goTo('/pages/my/userInfo')">
							<image v-if="userInfo.luohan==1" class="avatar" src="/static/luohan.png" mode="aspectFill">
							</image>
							<image v-else class="avatar" :src="userInfo.avatar || '/static/default_avatar.png'"
								mode="aspectFill"></image>
						</view>

						<view class="login-info" v-if="!hasLogin">
							<button class="login-btn" @tap="jumpTo('/pages/my/login', 'inside', false)"
								v-if="!hasLogin">点击登录</button>
						</view>

						<view class="user-type" v-if="hasLogin">
							<text class="username user-uid">{{userInfo.nickname || '未知'}}</text>
							<!-- <image src="/static/user/super.png"></image> -->
							<view class="user-uid">UID:{{userInfo.id}} <text class="user-copy"
									@tap.stop="copy">复制</text></view>
							<view class="user-uid">贡献值：{{userInfo.contribution}}</view>
							<view class="user-uid" v-if="userInfo.user_level==2 || userInfo.user_level==3">
								流量券：{{userInfo.total_commission}}</view>

						</view>
					</view>
					<view class="actions" v-if="userInfo.user_level==3">
						<image :src="userInfo.user_fee_level" mode='aspectFit'></image>
						<!-- <image src="/static/user/card.png"></image> -->
					</view>
				</view>


				<!-- 	<view class="wallet-section">
					<image src="/static/user/my-wallet.png"></image>
				</view> -->


				<!-- Wallet Section -->
				<view class="wallet-section" @tap="jumpTo('/pages/my/balance/index', 'inside', true)">

					<view class="wallet-section-left">
						<view class="wallet-text-container">
							<image src="/static/user/order-icon.png" class="helper-icon"></image>
							<text class="wallet-text">我的钱包</text>
						</view>

						<text class="wallet-subtext">点击可查看我的钱包收益情况</text>

					</view>

					<button class="enter-button">立即进入</button>
				</view>
			</view>
		</view>
		<view class="bg-footer">
			<view class="container-footer">

				<!-- Services Section -->
				<view class="services-container">
					<text class="services-title">我的服务</text>

					<view class="services-section">
						<view class="service-item" @tap="goTo(service.url,service.name)"
							v-for="(service, index) in services" :key="index">
							<!-- {{service}} -->
							<image :src="service.icon" class="service-icon"></image>
							<text class="service-text">{{ service.name }}</text>
						</view>
					</view>
				</view>

				<!-- Helper Section -->
				<view class="helper-section">
					<text class="services-title-1">小助手</text>
					<view class="helper-item" v-if="userInfo.shop_id"
						@tap="jumpTo('/pages/my/shop/home', 'inside', true)">
						<image src="/static/user/tab-3.png" class="helper-icon"></image>
						<text class="helper-text">商家中心</text>
						<!-- 添加箭头图标 -->
						<image class="arrow-icon" src="/static/user/arrow-icon.png"></image>
					</view>
					<view class="helper-item" v-if="!userInfo.shop_id"
						@tap="jumpTo('/pages/my/shop/apply', 'inside', true)">
						<image src="/static/user/tab-3.png" class="helper-icon"></image>
						<text class="helper-text">商家入驻</text>
						<!-- 添加箭头图标 -->
						<image class="arrow-icon" src="/static/user/arrow-icon.png"></image>
					</view>
					<view class="helper-item" v-if="userInfo.agent"
						@tap="jumpTo('/pages/my/agent/home', 'inside', true)">
						<image src="/static/user/tab-8.png" class="helper-icon"></image>
						<text class="helper-text">创客中心</text>
						<!-- 添加箭头图标 -->
						<image class="arrow-icon" src="/static/user/arrow-icon.png"></image>
					</view>
					<view class="helper-item" v-if="!userInfo.agent"
						@tap="jumpTo('/pages/my/agent/apply', 'inside', true)">
						<image src="/static/user/tab-8.png" class="helper-icon"></image>
						<text class="helper-text">申请拓店</text>
						<!-- 添加箭头图标 -->
						<image class="arrow-icon" src="/static/user/arrow-icon.png"></image>
					</view>
					<view class="helper-item" @tap="goTo(help.url,help.name)" v-for="(help, index) in helpers"
						:key="index">
						<image :src="help.icon" class="helper-icon"></image>
						<text class="helper-text">{{ help.name}}</text>
						<!-- 添加箭头图标 -->
						<image class="arrow-icon" src="/static/user/arrow-icon.png"></image>
					</view>
					<view class="helper-item" @tap="tel()">
						<image src="/static/user/tab-8.png" class="helper-icon"></image>
						<text class="helper-text">联系客服</text>
						<!-- 添加箭头图标 -->
						<image class="arrow-icon" src="/static/user/arrow-icon.png"></image>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	var wx = require('jweixin-module');
	// #endif

	// #ifdef APP
	import wx from 'weixin-js-sdk';
	// #endif

	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	};

	import {
		mapState,
		mapMutations
	} from 'vuex';
	import user from '@/api/user';
	import shop from '@/api/shop';
	export default {
		data() {
			return {
				services: [{
						name: '我的订单',
						icon: '/static/user/my-order.png',
						url: '/pages/my/balance/order_list'
					},
					{
						name: '我的粉丝',
						icon: '/static/user/my-fans.png',
						url: '/pages/my/fans'
					},
					{
						name: '我的关注',
						icon: '/static/user/my-attention.png',
						url: '/pages/my/follow'
					}
				],
				helpers: [{
						name: '会员升级',
						icon: '/static/user/tab-1.png',
						url: '/pages/goods/list'
					},
					// {
					// 	name: '会员订单',
					// 	icon: '/static/user/tab-2.png',
					// 	url: '/pages/my/balance/order_list'
					// },
					// {
					// 	name: '商家入驻',
					// 	icon: '/static/user/tab-3.png',
					// 	url: '/pages/my/shop/apply'
					// },
					// {
					// 	name: '申请拓店',
					// 	icon: '/static/user/tab-4.png',
					// 	url: '/pages/my/agent/apply'
					// }, // 删除这个逗号
					{
						name: '邀请好友',
						icon: '/static/user/tab-5.png',
						url: '/pages/my/qrcode'
					},
					{
						name: '服务协议',
						icon: '/static/user/tab-6.png',
						url: '/pages/my/agree'
					},
					{
						name: '会员商城',
						icon: '/static/user/tab-7.png',
						url: ''
					},
					// {
					// 	name: '优惠券',
					// 	icon: '/static/user/tab-7.png',
					// 	url: '/pages/my/couponList/couponList'
					// }
				],

				share: {
					path: '/pages/coupon/index',
					title: '您有一张专属优惠券',
					imageUrl: '/static/share_3.png'
				},
				tipStatus: false,
				modalName: 'Modal',
				VIP: 1,
				user_level: 0,
				total_commission: 0,
			}
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo']),
		},
		onLoad(options) {
			this.getWechatCode()
			// 调用登录接口，获取 code
			// uni.login({
			// 	success: (loginRes) => {
			// 		if (loginRes.code) {
			// 			// 获取用户信息
			// 			uni.getUserInfo({
			// 				success: (res) => {
			// 					// 登录成功后调用自定义的 login(res)
			// 					this.login(res);
			// 				},
			// 				fail: (err) => {
			// 					console.error('获取用户信息失败', err);
			// 				}
			//  		});
			// 		} else {
			// 			console.error('登录失败！' + loginRes.errMsg);
			// 		}
			// 	},
			// 	fail: (err) => {
			// 		console.error('登录失败', err);
			// 	}
			// });


			// if (options.q) {
			// 	let qrUrl = decodeURIComponent(options.q)
			// 	var tempId = this.getQueryString(qrUrl);
			// 	console.log(qrUrl);
			// 	console.log(tempId);
			// }
			// if (this.hasLogin) {
			// 	this.$store.dispatch('user')
			// }
			// this.getWechatCode()

		},
		onShow() {
			this.tipStatus = false;
			// console.log(this.userInfo.user_fee_level)
			// this.index()
			// if(this.userInfo){
			// 	this.VIP = 'https://www.yycjkb.cn/uploads/v' + this.userInfo.user_fee_level + '.png';
			// 	console.log(this.VIP)
			// }

		},
		onShareAppMessage(res) {
			return {
				path: this.share.path + '?outPutUid=' + this.userInfo.id,
				title: this.share.title,
				imageUrl: this.share.imageUrl
			}
		},

		methods: {
			getWechatCode() {
				if (isWechat) {
					let appid = "wx06785591c04f8c56"; //微信APPid
					let code = this.getUrlCode().code; //是否存在code
					let local = window.location.href;
					if (code == null || code === "") {
						//不存在就打开上面的地址进行授权
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
							appid +
							"&redirect_uri=" +
							encodeURIComponent(local) +
							"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
					} else {
						this.code = code;
						// alert(this.code)
						this.getCode()
					}
				}
			},
			async getCode() {
				shop.reggetOpenid({
					code: this.code
				}).then(res => {
					if (res.code == 1) {
						this.disabled = true;
						this.loading = false;
						// this.toast(res.msg);
						// window.location.href = res.data
						// this.status = res.msg;
						this.$store.commit('setHasLogin', true);
						this.$store.commit('setToken', res.data.token);
						this.$store.commit('setUserInfo', res.data);
						console.log('添加成功');
						this.index()
						// this.goBack();
					} else {
						this.loading = false
						// this.toast(res.msg);
					}
				})
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				console.log(url)
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				console.log(theRequest);
				return theRequest;
			},
			async login(res) {
				console.log(res);
				const userInfo = res.detail;
				if (userInfo.errMsg !== "getUserInfo:ok") {
					console.error(userInfo.errMsg)
					return;
				}

				const [loginErr, loginRes] = await uni.login({
					provider: 'weixin'
				});
				if (loginErr) {
					return this.toast(loginErr.errMsg);
				}
				const accountInfo = uni.getAccountInfoSync();
				console.log(accountInfo);
				const data = {
					platform: 'weapp',
					code: loginRes.code,
					encryptedData: userInfo.encryptedData,
					iv: userInfo.iv,
					appid: accountInfo.miniProgram.appId,
				};
				uni.showLoading({
					title: '登陆中~'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 5000)
				user.thirdLogin({
					platform: data.platform,
					code: data.code,
					encryptedData: data.encryptedData,
					iv: data.iv,
					appid: data.appid,
					referrer_code: uni.getStorageSync('referrer_code'),
				}).then(res => {
					uni.hideLoading();
					if (res.code !== 1) {
						return this.toast(res.msg)
					}
					if (res.code === 1) {
						this.$store.commit('setHasLogin', true);
						this.$store.commit('setToken', res.data.userinfo.token);
						this.$store.commit('setUserInfo', res.data.userinfo);
						uni.navigateBack();
					}
				})
			},
			joinchain() {
				uni.navigateTo({
					url: '/pages/my/shop/chain_join'
				})
			},
			tochain() {

				shop.chainCheck().then(res => {
					if (res.code === 1 && res.data > 0) {
						uni.navigateTo({
							url: '/pages/my/shop/chain'
						})
					} else {
						uni.showToast({
							title: '尚未开通权限'
						})
					}
				})


			},
			tostore(username) {

				if (!this.hasLogin) {
					uni.showModal({
						title: '请先登录'
					})
					return;
				}

				// #ifdef APP-PLUS
				plus.runtime.openURL('https://www.yycjkb.cn/dist/#/pages/user/auth/name?name=' + username)
				// #endif

				// #ifdef H5
				location.href = 'https://www.yycjkb.cn/dist/#/pages/user/auth/name?name=' + username
				// #endif
			},
			profit() {
				let that = this
				uni.showModal({
					title: '会员迁移',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入手机号码', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							if (!res.content) {
								return this.toast('电话号码不能为空')
							}
							that.changeProfit(res.content)
							console.log('输入的内容：', res.content);

						}
					}
				});

			},
			changeProfit(mobile) {

				user.changeprofile({
					change_mobile: mobile
				}).then(res => {
					uni.hideLoading();
					// if (res.code === 1) {
					// this.user_level = res.data.user.user_level
					return this.toast(res.msg)
					// }
				})
			},
			index() {
				this.inviteCode = this.$store.state.inviteCode;
				// 登录账号
				user.index().then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						this.user_level = res.data.user.user_level
						this.total_commission = res.data.user.total_commission
					}
				})
			},
			/**
			 * 获取小程序二维码参数
			 * @param {String} scene 需要转换的参数字符串
			 */
			getQueryString: function(url) {
				var reg = new RegExp('(^|&|)([0-9]*$)', 'g')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[0]
				}
				return null;
			},
			shareFriends() {
				this.tipStatus = !this.tipStatus;
			},
			remindMsg() {
				this.toast('敬请期待!');
			},
			oaLoad(a, b, c) {
				console.log(a, b, c)
			},
			oaLoadError(a, b, c) {
				console.log(a, b, c)
			},

			async goTo(path, name) {
				if (!this.hasLogin) {
					return;
				}

				if (name == '会员商城') {
					this.tostore(this.userInfo.username);
					return
				}

				if (!path) {
					this.toast('敬请期待!');
					return;
				}
				this.jumpTo(path)
			},
			async copy() {
				uni.setClipboardData({
					data: this.userInfo.id.toString()
				}).then(res => {
					const [error, data] = res;
					if (!error) {
						this.toast('复制成功');
					} else {
						console.error(error);
					}
				});
			},
			async tel() {
				// if (!this.config.contact) {
				// 	this.toast('暂不支持');
				// 	return;
				// }

				uni.showModal({
					title: '联系客服', // 对话框的标题
					content: '客服上班时间:上午9:00～12:00,下午2:30～6:00', // 对话框的内容
					showCancel: true, // 是否显示取消按钮
					cancelText: '取消', // 取消按钮的文字
					cancelColor: '#000000', // 取消按钮的文字颜色
					confirmText: '确定', // 确定按钮的文字
					confirmColor: '#3CC51F', // 确定按钮的文字颜色
					success: function(res) { // 回调函数
						if (res.confirm) { // 用户点击了确定
							console.log('用户点击确定');

							uni.makePhoneCall({
								phoneNumber: '4008390228'
							});

						} else if (res.cancel) { // 用户点击了取消
							console.log('用户点击取消');
						}
					},
					fail: function(err) { // 弹出框失败的回调
						console.log('弹出框失败：', err);
					},
					complete: function() { // 弹出框完成的回调
						console.log('弹出框完成');
					}
				});


			},
			goInvite() {
				// this.share.path = this.share.path + '?outPutUid=' + this.userInfo.id;
				this.shareFriends();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-vip {
		width: 30px;
		height: 30px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -4px;
	}

	.login-btn {
		margin-left: 20px;
		font-size: 30rpx;
		background: transparent;
		border: none;
		color: #fff;
		outline: none;
		padding: 0;

		// width: 30%;
		&::after {
			display: none;
		}
	}

	.user-type {
		flex-direction: column;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 10px;

		image {
			width: 100px;
			height: 20px;
		}
	}

	.user-uid {
		font-size: 33rpx;
		color: #fff;
		margin-top: 5px;
		text-align: left;
		/* 添加此行使文本左对齐 */
		width: 100%;
		/* 确保占据父容器的宽度 */
	}

	.avatar {
		width: 160rpx;
		/* 调整为更大的尺寸 */
		height: 160rpx;
		/* 与宽度一致以保持圆形 */
		border-radius: 50%;
		/* 保持圆形 */
		margin-bottom: 10rpx;
	}


	.user-copy {
		font-size: 12px;
		letter-spacing: 0;
		background: #F8ACA9;
		color: #fff;
		border-radius: 20px;
		padding: 2px 6px;
		margin-left: 10px;
	}

	.avatar-info {
		position: relative;
		// width: 73px;
		float: left;
	}

	.user-info {
		display: flex;
		align-items: center;
		flex: 1;
		height: 150px;
	}





	.username {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.actions {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		image {
			width: 120px;
			height: 80px;
		}
	}

	.bg-header {
		background-color: #000;
	}

	.bg-footer {
		background: #F2F5FA
	}

	.container-footer {
		padding: 20rpx;
	}

	.header {
		display: flex;
		align-items: center;
		background-color: #FF6600;
		padding: 20rpx;
		// border-radius: 10rpx;
	}


	.member-status {
		font-size: 24rpx;
		color: #D3D3D3;
	}



	.scan-button,
	.id-button {
		background: transparent;
		border: none;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.wallet-section {
		margin: 20rpx;
		background-color: #3B3F58;
		/* 设置背景为黑色 */
		padding: 20rpx;
		border-radius: 30rpx 30rpx 0 0;
		/* 设置四周的圆角 */
		display: flex;
		justify-content: center;
		/* 内容均匀分布 */
		align-items: center;
		position: relative;
		/* 为了使用伪元素定位 */
		z-index: 1;
		/* 控制层级 */
		overflow: hidden;
		/* 防止溢出 */


		image {
			// height: 80px;
		}
	}

	// .wallet-section::after {
	// 	content: '';
	// 	position: absolute;
	// 	bottom: -20px;
	// 	/* 弧线向下偏移 */
	// 	left: 0;
	// 	width: 100%;
	// 	height: 40px;
	// 	/* 弧线高度 */
	// 	background-color: #3B3F58;
	// 	/* 弧线颜色与背景一致 */
	// 	border-radius: 50% 50% 0 0;
	// 	/* 创建顶部弧形 */
	// 	z-index: -1;
	// 	/* 确保弧线在 .wallet-section 下方 */
	// }


	.wallet-section-left {
		display: flex;
		flex-direction: column;
	}

	.wallet-text-container {

		display: flex;
		align-items: center;
		/* 图标和文本水平排列 */
	}

	.wallet-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
	}

	.wallet-subtext {
		font-size: 24rpx;
		color: #fff;
		padding-top: 10px;
	}

	.enter-button {
		background-color: #FF6600;
		color: #FFFFFF;
		border-radius: 50px;
		/* 圆角效果 */
		// padding: 10rpx 20rpx; /* 设置左右内边距 */
		height: 70rpx;
		/* 设置按钮的高度 */
		width: auto;
		/* 宽度自适应，保持文本居中 */
		display: flex;
		justify-content: center;
		align-items: center;
		/* 确保文本居中 */
		margin-right: 5px
	}

	.services-container {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		/* 设置背景为白色 */
		border-radius: 10px;
		/* 设置圆角为 50px */
		padding: 20rpx;

		/* 可选：为容器添加内边距，让内容不紧贴边缘 */
	}

	// 

	.services-title {
		margin-left: 10px;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.services-title-1 {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.services-section {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33%;
	}

	.service-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.service-text {
		font-size: 26rpx;
	}

	.helper-section {
		padding: 20px;
		margin-top: 40rpx;
		background-color: #fff;

		.services-title {
			// margin-bottom:20px;
		}
	}

	.helper-item {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 使箭头图标和文本分开 */
		margin-bottom: 20rpx;
	}

	.helper-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.helper-text {
		font-size: 28rpx;
		flex: 1;
		/* 让文本占据剩余空间 */
	}

	.arrow-icon {
		width: 20rpx;
		height: 20rpx;
	}
</style>
